<jsp:include page="include-header.jsp" />

<!-- for adding and removing of tags -->
<link rel="stylesheet" href="css/superbly-tagfield.css" />
<script type="text/javascript" src="js/superbly-tagfield.js"></script>

<script type="text/javascript">
	$(function() {
		var productsTags = [ 'Alfa Romeo', 'Aston Martin', 'Audi', 'Bentley',
				'Bugatti', 'BMW', 'Citroen', 'Cadillac', 'Chevrolet', 'Dodge',
				'Daewoo', 'Ferrari', 'Ford', 'Fiat', 'Honda', 'Hyundai',
				'Jaguar', 'Jeep', 'Kia', 'Lada', 'Lexus', 'Lotus', 'Maserati',
				'Mazda', 'Mercedes', 'Nissan', 'Opel', 'Peugeot', 'Porsche',
				'Rover', 'Renault', 'Suzuki', 'Subaru', 'Seat', 'Toyota',
				'Volvo', 'Vauxhall', 'VW' ];
		var customizedTags = [ 'Friendly', 'Fierce', 'Happy', 'Joyful',
				'Friendly', 'Influential' ];

		// Initialize Demo 2
		$("#products").superblyTagField({
			allowNewTags : false,
			showTagsNumber : 10,
			preset : [ 'Audi', 'Bugatti' ],
			tags : productsTags
		});

		$("#customized").superblyTagField({
			allowNewTags : true,
			showTagsNumber : 10,
			preset : [ 'Friendly', 'Influential' ],
			tags : customizedTags
		});

	});
</script>

<!-- start of left column -->
<div id="content" class="left_column">
<div id="content_header">Add a Contact</div>
<div id="content_padded"><!-- form starts here  -->
<form id="formID" class="formular customForm" method="post" action="">
<fieldset><legend>Profile Information</legend>

<div><label>First Name</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Last Name</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Company</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Job Title</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Preferred Language</label> <select
	name="contactSuffix" id="contactSuffix" class="">
	<option value="">Choose a language</option>
	<option value="enlish">English</option>
	<option value="spanish">Spanish</option>
	<option value="french">French</option>
	<option value="german">German</option>
</select></div>

<div><label>Start Work Time</label> <select name="contactSuffix"
	id="contactSuffix" class="">
	<option value="">Choose a time (24 hrs)</option>
	<option value="0000">0000</option>
	<option value="0030">0030</option>
	<option value="0100">0100</option>
	<option value="0130">0130</option>
</select></div>

<div><label>End Work Time</label> <select name="contactSuffix"
	id="contactSuffix" class="">
	<option value="">Choose a time (24 hrs)</option>
	<option value="0000">0000</option>
	<option value="0030">0030</option>
	<option value="0100">0100</option>
	<option value="0130">0130</option>
</select></div>

</fieldset>

<input class="submit" type="submit" value="Add Contact to GlobaTrek" />
or <a id="showhidetrigger" href="#">Provide more details</a>

<div id="showhidetarget">
<fieldset><legend>Working Location Address</legend>
<div><label>Street Address</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Street Address Line 2</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Postal</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Country</label> <select name="contactSuffix"
	id="contactSuffix" class="">
	<option value="">Choose a country</option>
	<option value="english">United States</option>
	<option value="spanish">Spanish</option>
	<option value="french">Singapore</option>
	<option value="german">Australia</option>
</select></div>

<div><label>State</label> <select name="contactSuffix"
	id="contactSuffix" class="">
	<option value="">Choose a state</option>
	<option value="enlish">Indiana</option>
	<option value="spanish">Iowa</option>
	<option value="french">Maine</option>
</select></div>

<div><label>City</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

</fieldset>


<fieldset><legend>Contacts</legend>
<div><label>Corporate Email</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

<div><label>Phone Contact</label><input value=""
	class="validate[required] text-input" type="text" name="req" id="req" /></div>

</fieldset>

<fieldset><legend>Association</legend>
<div><label>Products</label> <input type="text"
	name="product_tags" id="products" /></div>


<div><label>Tags</label><input type="text" name="customized_tags"
	id="customized" /></div>

</fieldset>
</div>
<hr />
</form>
</div>
<!-- end padding --></div>
<!-- end of left column -->

<!-- start of right column -->

<div class="right_column">
<p>Expanding your networks?</p>
<p>Import and Export your contacts into GlobaTrek today.</p>
</div>

<!-- end of right column -->

<jsp:include page="include-footer.jsp" />


